<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        内容管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>新建文件
      </p>
      <div class="content">
        <div class="container">
          <div class="lister">
            <div class="listTitle">文件名称</div>
            <div class="listCont">
              <el-input
                v-model="from.resourceTitle"
                :disabled="boolType"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="lister">
            <div class="listTitle">上传人员</div>
            <div class="listCont">
              <el-input
                v-model="from.uploadName"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="lister" style="align-items: start">
            <div class="listTitle">上传文件</div>
            <div class="listCont">
              <span>支持文件格式:pdf</span>
              <el-upload
                :disabled="boolType"
                class="upload-demo"
                :action="httpurl + '/api/fileUpload'"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="success"
                accept=".pdf,.PDF"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" :disabled="boolType" type="primary"
                  >点击上传</el-button
                >
              </el-upload>
            </div>
          </div>
          <div class="lister">
            <div class="listTitle">展示渠道</div>
            <div class="listCont">
              <el-radio-group v-model="from.showClient" :disabled="boolType">
                <el-radio :label="0">全部渠道</el-radio>
                <el-radio :label="2">客户端</el-radio>
                <el-radio :label="1">增值业务平台</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="btnGroup" style="margin-top: 20px">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="sumbit" :disabled="boolType"
              >确认</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      httpurl: this.GLOBAL.httpurl,
      fileList: [],
      // 查看的时候不让点击
      boolType: false,
      // 传递的数据
      from: {
        id: "",
        resourceTitle: "", //内容名称
        uploadName: "", //上传人员
        showClient: "", //渠道展示
        resourceName: "", //资源名称
        resourceUrl: "", //资源地址
        resourceSuffix: "", //资源后缀
      },
    };
  },
  created() {
    this.from.uploadName = localStorage.getItem("sysUserName");
    // 判断是修改还是查看
    if (this.$route.query.perationType) {
      this.from.id = this.$route.query.id;
      // 调用回显接口
      this.echoData();
      if (this.$route.query.perationType == "see") {
        this.boolType = true;
      }
    }
  },
  methods: {
    // -----------------上传文件-----------
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.filePath = "";
      this.from.resourceName = "";
      this.from.resourceUrl = "";
      this.from.resourceSuffix = "";
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 上传成功
    success(res, file, fileList) {
      console.log(res);
      console.log(file);
      this.from.resourceUrl = res.data.filePath;
      this.from.resourceName = file.name;
      var fileName = file.name;
      var first = fileName.lastIndexOf("."); //取到文件名开始到最后一个点的长度
      var namelength = fileName.length; //取到文件名长度
      var filesuffix = fileName.substring(first + 1, namelength); //截取获得后缀名
      this.from.resourceSuffix = filesuffix;
    },
    // -----------------------------------
    // 提交数据
    sumbit() {
      console.log(this.from);
      // 判断不能是空
      if (
        this.from.resourceTitle == "" ||
        this.from.uploadName == "" ||
        this.from.showClient === "" ||
        this.from.resourceName == "" ||
        this.from.resourceUrl == "" ||
        this.from.resourceSuffix == ""
      ) {
        layer.open({
          content: "数据不能为空",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });

        return false;
      }
      if(this.from.resourceSuffix!='pdf'){
        layer.open({
          content: "只能上传pdf文件",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        return false
      }
      axios
        .post("api/school/saveSchoolResourse", this.from)
        .then((res) => {
          console.log(res);
          if (res.data.code == "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
            this.$router.push({
              name: "contnet",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消返回上一步
    cancel() {
      this.$router.push({
        name: "contnet",
      });
    },
    // 数据回显
    echoData() {
      let id = this.$route.query.id;
      axios
        .post("api/school/getSchoolResourseInfo", { id })
        .then((res) => {
          console.log(res);
          if (res.data.code == "0000") {
            res.data.data.showClient = Number(res.data.data.showClient);
            this.from = res.data.data;
            // 获取上传人
            this.from.uploadName = localStorage.getItem("sysUserName");
            this.from.delFlag = undefined;
            // 处理文件回显的格式
            let obj = [
              { name: this.from.resourceName, url: this.from.resourceUrl },
            ];
            this.fileList = obj;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.lister {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.listTitle {
  width: 80px;
  color: #909399;
}
.container {
  padding-left: 20px;
  margin-top: 20px;
}
</style>